import React from 'react'
import { View, Image } from 'react-native'
import { Lt, Jx, Jpp, Label, Color, Images, Dialog, Touch, cSys } from "./_utils"
import { SHARE_CAP, SHARE_WCHAT, SHARE_QQ, SHARE_SAVE, cShare } from './_share'

// 分享按钮
export class ViewShare extends React.PureComponent{
    render(){
        const {source, children, onPress} = this.props;
        return <Touch style={{flex:1}} onPress={onPress}>
            <View style={{flex:1, justifyContent:"center", alignItems:"center"}}>
                <Image source={source}/>
                <Label style={{marginTop:5, fontSize:Lt.c16, color:Color.c3}}>{children}</Label>
            </View>
        </Touch>
    }
}

// 呼起分享 Android/IOS  单图/多图/保存 图片的分享方式都不一样
export class ViewShares extends React.PureComponent{
    constructor(props){
        super(props);
        // 绑定以后作用到下一句了
        this.onWecaht = this.onWecahtMoments.bind(this, false);
        this.onMoments = this.onWecahtMoments.bind(this, true);
        this.onQQ = this.onQQzone.bind(this, false);
        this.onQzone = this.onQQzone.bind(this, true);
        this.onSave = this.onSave.bind(this);
    }
    
    onWecahtMoments(moments){
        let { info } = this.props;
        Dialog.retain(true);
        info.promiseImage({SHARE_WCHAT}).then(image=>{
            Dialog.release();
            if(!image){
                return;
            }
            // console.warn(image);
            cShare.shareWchat(image, moments).then(r=>null);
        }).catch(err=>{
            Dialog.release();
        });
    }
    onQQzone(Zone){
        let { info } = this.props;
        Dialog.retain(true);
        info.promiseImage({SHARE_QQ}).then(image=>{
            if(!image){
                Dialog.release();
                return;
            }
            // TIM选择/未登录状态
            // 都会导致圈圈遗留
            Dialog.release(); 
            cShare.shareQQ(image, Zone).then(r=>{
                Dialog.release();
            })
        }).catch(err=>{
            Dialog.release();
        });
    }
    onSave(){
        let { info } = this.props;
        Dialog.retain(true);
        info.promiseImage({SHARE_SAVE}).then(image=>{
            Dialog.release();
            if(image){
                cSys.toCameraRoll(image, true);
            }
        }).catch(err=>{
            Dialog.release();
        });
        return;
    }
    render(){
        const {showTitle, style} = this.props;
        return <View style={{width:Jpp.width, backgroundColor:"white", ...style}}>
            {
                showTitle ? 
                <Label style={{marginTop:20, alignSelf:"center", fontSize:Lt.c18, color:Color.c3}}>分享到</Label>
                : null
            }
            <View style={{height:120, flexDirection:"row", justifyContent:"space-around", alignItems:"center"}}>
            {
                (!cSys.isWechatInstalled()) ? null : 
                <ViewShare onPress={this.onWecaht} source={Images.weixin_fenxiang}>微信</ViewShare>
            }
            {
                (!cSys.isWechatInstalled()) ? null : 
                <ViewShare onPress={this.onMoments} source={Images.pengyouquan_fx}>朋友圈</ViewShare>
            }
            {
                (!cSys.isQQInstalled()) ? null : 
                <ViewShare onPress={this.onQQ} source={Images.qq}>QQ好友</ViewShare>
            }
            {
                (!cSys.isQQInstalled()) ? null : 
                <ViewShare onPress={this.onQzone} source={Images.kongjian}>QQ空间</ViewShare>
            }
                <ViewShare onPress={this.onSave} source={Images.shouji}>保存手机</ViewShare>
            </View>
        </View>
    }
}